/**
 * 111 处理数据拍成需要的顺序
 * 222 循环数据 制作成dom
 */

/* e.g.
 let myTree = new MyTree({
        id: "myTree",
        data: [
            {
                id: 1,
                pid: 0,
                text: "1"
            },
            {
                id: 11,
                pid: 1,
                text: "1-1"
            },
            {
                id: 12,
                pid: 1,
                text: "1-2"
            },
            {
                id: 2,
                pid: 0,
                text: "2"
            },
            {
                id: 21,
                pid: 2,
                text: "2-1"
            },
        ]
    })
*/
class MyTree {
    constructor(obj) {
        this._id = obj.id
        this._data = this.handing_data(obj.data)
        this.init()
        this.config = {
            icon: true, // 是否显示小图标
            paddingLeft: {
                default: 10,
                size: 10,
                util: "px"
            }, // 子级距离父级的左距
        }
    }
    handing_data(arr) {
        // 111 数据分离 按层数存入大数组 big_arr
        // 222 按照层数进行排序 相同层级按原始数据的先后顺序排列同时将层数写入数据
        let _arr = JSON.parse(JSON.stringify(arr))
        let temp_pid = _arr.map(item => item.id)
        // 所有的pid （顶层没有pid，每次递归将其顶层杀掉）
        let big_arr = [] // 大数组 存放各个层级的数据 下标即为层级
        let count = 0 // 和程序本身没有太大关系（防止无限递归）
        function dg(_used_id_arr) {
            let _not_used_arr = _arr.filter(item => !_used_id_arr.some(it => it === item.id))
            let t_arr = [] // 找没有id在 temp_pid 中的数据
            _not_used_arr.map(item => {
                if (!temp_pid.some(i => i == item.pid)) {
                    t_arr.push(item)
                    _used_id_arr.push(item.id)
                }
            })
            // 存入大数组
            big_arr.push(t_arr)
            // 从pids中去除当前最高层，创建下次递归的数据
            t_arr.map(item => temp_pid = temp_pid.filter(i => i !== item.id))
            // 已使用的数据条数不能大于原数据总条数
            if (_used_id_arr.length < arr.length) {
                count++
                if (count < 100) {
                    dg(_used_id_arr)
                }
            }
        }
        dg([])
        console.log("big_arr---->", big_arr)
        let sorted_arr = [] // 排序过的数据，最后将其返回
        big_arr.map((item_out, index_out) => {
            // 加层级level
            item_out = item_out.map(z => {
                z.level = index_out
                return z
            })
            if (index_out === 0) {
                sorted_arr.push(...item_out)
            } else {
                // 循环当前层找其父
                item_out.map(item_in => {
                    let p_i = 0 // 父 index 是
                    let t_i = 0 // 当存在子级的时候，需要后移的位数
                    sorted_arr.map((x, x_i) => {
                        if (x.id === item_in.pid) {
                            p_i = x_i
                        }
                        if (x.pid === item_in.pid) {
                            t_i++
                        }
                    })
                    // 使用到的数据（同时也是排过序的）无此数据再插入此数据
                    if (!sorted_arr.some(z => z.id === item_in.id)) {
                        sorted_arr.splice(p_i + 1 + t_i, 0, item_in)
                    }
                })
            }
        })
        console.log("sorted_arr---->", sorted_arr)
        return sorted_arr
    }
    // 清除当前选中
    clear_active() {
        let _index = Number(localStorage.getItem("now_active") || 0)
        let tree_arr = document.querySelectorAll(".tree_item")
        console.log("tree_arr---->", tree_arr)
        for (let i = 0; i < tree_arr.length; i++) {
            if (_index === i) {
                const item = tree_arr[i];
                let classVal = item.getAttribute("class")
                classVal = classVal.replace(" active", "")
                item.setAttribute("class", classVal)
                break
            }

        }
    }
    // 制作item
    make_item(item) {
        let that = this
        let span_dom = document.createElement("div")
        span_dom.style.cssText = `
                padding-left: ${this.config.paddingLeft.default + item.level * this.config.paddingLeft.size}${this.config.paddingLeft.util}
            `
        span_dom.setAttribute("class", "tree_item")
        span_dom.setAttribute("data-id", item.id)
        span_dom.setAttribute("data-pid", item.pid)

        span_dom.onclick = function () {
            console.log(item)
            that.clear_active()
            let classVal = span_dom.getAttribute("class")
            classVal = (classVal || "").concat(" active")
            span_dom.setAttribute("class", classVal)
            localStorage.setItem("now_active", item._$index)
        }
        if (this.config.icon && item.icon) {
            let img_div = document.createElement("div")
            img_div.setAttribute("class", "img_div")
            img_div.style.cssText = `
                    width: 24px;height: 24px;margin-left: 5px;
                `
            let img = document.createElement("img")
            img.setAttribute("class", "img")
            img.src = item.icon
            img.style.cssText.cssText = `
                    width: 24px;height: 24px;
                `
            img_div.appendChild(img)
            span_dom.append(item.text)
        } else {
            span_dom.append(item.text)
        }
        return span_dom
    }
    // 引入css
    get_tree_css() {
        let style = document.createElement("style")
        style.innerHTML = `
                .tree_item {
                    background: #fff;
                    display: flex; flex-direction: row;
                    align-items: center;height: 30px;border-right: 1px solid #fff;
                }
                .active {
                    background: #f1f1f1;
                    border-right: 1px solid #2194ff;
                }
            `
        document.body.appendChild(style)
    }
    // 初始化
    init() {
        // 引入css
        this.get_tree_css()
        console.log("init")
        let target_dom = document.getElementById(this._id)
        target_dom.innerHTML = ""
        for (let i = 0; i < this._data.length; i++) {
            const item = this._data[i];
            item._$index = i
            let span_dom = this.make_item(item)
            target_dom.appendChild(span_dom)
        }
    }
}

export default MyTree;